<template>
  <div>
    <div class="banner">
      <p v-if="cityName">城市：{{ cityName }}</p>
      <div v-else>
      <p>Loading...</p>
    </div>
    <div>
      <input type="text" v-model="cityName" placeholder="输入城市名称" class="weainput">
      <button @click="getWeatherData" class="weabutton">查询</button>
      <input type="text" v-model="index" placeholder="输入查询日期" class="weainput">
      <button @click="addindex" class="weabutton">查询</button>
      查询未来七天日期--0~6
    </div>
    <div v-if="datalist[index]">
    <ul>
         <li class="active">当前日期：{{datalist[index].fxDate}}</li>
     </ul>
      <div class="weaheader clearfix">
 </div>
 <div class="w clearfix">
     <img src="../assets/sunny.png" alt="" class="Weather" data-title="iconDay">
     <span class="DEG" data-title="tempMin">{{ datalist[index].tempMin }}~{{ datalist[index].tempMax }}°C</span>
        <span class="weather" data-title="textDay">{{ datalist[index].textDay }}</span>
 </div>
      <div class="co">
   <div class="weacontent">
       <ul class="clearfix">
           <li class="clearfix">
               <img src="../assets/img/fx.png" alt="">
               <div class="text">
                    <span data-title="windScaleDay" data-text="级">{{datalist[index].windScaleDay}}</span>
                    <span class="WDIR" data-title="windDirDay">{{ datalist[index].windDirDay }}</span>
               </div>
           </li>
           <li class="clearfix">
               <img src="../assets/img/uv.png" alt="">
               <div class="text">
                   <span data-title="uvIndex" data-text=" ">{{ datalist[index].uvIndex }}</span>
                   <span class="">紫外线</span>
               </div>
           </li>
           <li class="clearfix">
               <img src="../assets/img/hum.png" alt="">
               <div class="text">
                   <span data-title="humidity" data-text="%">{{ datalist[index].humidity }}</span>
                   <span class="">相对湿度</span>
               </div>
           </li>
           <li class="clearfix">
               <img src="../assets/img/pressure.png" alt="">
               <div class="text">
                   <span data-title="pressure" data-text="hPa">{{ datalist[index].pressure }}</span>
                   <span class="">大气压</span>
               </div>
           </li>
           <li class="clearfix">
               <img src="../assets/img/pcpn.png" alt="">
               <div class="text">
                   <span data-title="precip" data-text="mm">{{ datalist[index].precip }}</span>
                   <span class="">降水量</span>
               </div>
           </li>
           <li class="clearfix">
               <img src="../assets/img/vis.png" alt="">
               <div class="text">
                   <span data-title="vis" data-text="KM">{{ datalist[index].vis }}</span>
                   <span class="">能见度</span>
               </div>
           </li>
       </ul>
   </div>
  </div>
    </div>
  </div>
  </div>
</template>



</template>
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        datalist: [],
        cityName: '成都',
        index: 0,
      }
    },
    methods: {
        getCityId() {
        const key = '5e8dd5bedb1741629d8b6268c1d4e32b';
        const url = `https://geoapi.qweather.com/v2/city/lookup?location=${this.cityName}&key=${key}`;

        return axios.get(url)
            .then(response => {
            if (response.data.location && response.data.location.length > 0) {
                return response.data.location[0].id;
            } else {
                throw new Error('无法获取城市码');
            }
            })
            .catch(error => {
            console.error(error);
            });
        },
        getWeatherData() {
        this.getCityId()
            .then(cityId => {
            const key = '5e8dd5bedb1741629d8b6268c1d4e32b';
            const url = `https://devapi.qweather.com/v7/weather/7d?location=${cityId}&key=${key}`;

            return axios.get(url);
            })
            .then(response => {
                console.log(response.data)
            if (response.data) {
                this.datalist = response.data.daily;
            } else {
                throw new Error('无法获取天气信息');
            }
            })
            .catch(error => {
            console.error(error);
            });
        },
        addindex() {
          index=index+1
        }
    },
    mounted() {
      try {
        this.getWeatherData();
      } catch (error) {
        console.error(error);
      }
    }
  }
  </script>

<style>
/*显示内容*/
.search_box {
 width: 400px;
 margin: 0 auto;
}

/*输入框*/
.weainput {
 padding-left: 5px;
 height: 30px;
 width: 225px;
 border: none;
 color: rgba(245, 86, 144, 0.8);
 outline: none;
 border-radius: 18px;
 background-color: #FFFFFF;
 padding: 4px 0 4px 14px;
 margin: 50px 0 50px 50px;
}

.weabutton {
 text-decoration: none;
 width: 70px;
 background-color: rgb(93, 202, 175);
 height: 30px;
 margin-left: 10px;
 text-align: center;
 color: white;
 text-transform: uppercase;
 border-radius: 50px;
 cursor: pointer;
}

/*天气情况及温度显示*/
.w {
 width: 176px;
 color: #fff;
 margin: 0 auto;
 margin-bottom: 20px;
}

.w img {
 float: left;
 width: 108px;
 height: 108px;
}

/*度数显示*/
.w .DEG {
 float: left;
 padding-top: 17px;
 font-size: 48px;
 line-height: 1;
font-weight: 300;
 width: 65px;
}

/*天气状况*/
.w .weather {
 font-size: 18px;
 line-height: 24px;
}

/*近三天*/
.weaheader {
 width: 650px;
 margin: 0 auto;
 border-radius: 22px;
}

.weaheader li {
 float: left;
 width: 192px;
 height: 50px;
 text-align: center;
 border-radius: 22px;
 line-height: 50px;
 margin-left: 10px;
 color: rgb(163, 73, 161);
 cursor: pointer;
 background-color: #EFF1F7;
}

.weaheader li:hover,

.weaheader .active {
 background-color: rgba(102, 134, 253, 0.9);
 color: #fff;
}

/*显示内容--湿度--压强*/
.weacontent {
 height: 100px;
 background-color: rgb(142, 223, 188);
 line-height: 20px;
 padding: 24px 0;
 border-radius: 12px;
 width: 800px;
 margin: 0 auto;
}

.weacontent>ul>li {
 float: left;
 margin-left: 30px;
 position: relative;
}

.weacontent>ul>li>img {
 position: relative;
 top: -3px;
 width: 36px;
 height: 36px;
 margin-right: 8px;
 float: left;
}

.weacontent>ul>li>.text {
 float: left;
 color: #fff;
}

.text span:first-child {
 display: block;
 font-size: 18px;
 line-height: 14px;
}

.weacontent>ul>li span:nth-child(2) {
 margin-top: 5px;
 font-size: 14px;
}

.banner {
 overflow: hidden;
 background: url(../assets/img/bg.jpg) 0% 0% / 100% 100% no-repeat;
 /* height: 694px; */
 height: 100vh;
 position: relative;
}
</style>
  